<script setup>
import { onMounted, ref } from 'vue';

//以下是页面滑动切换逻辑
var ds = document.getElementsByTagName('section')
const container = ref(undefined)
let timer = undefined
let curIndex = 0

onMounted(() => {
    container.value.addEventListener('wheel', function (e) {
    if (timer) {
        clearTimeout(timer)
        timer = undefined
    }
    timer = setTimeout(() => {
        if (e.deltaY >= 100) {
            if (curIndex < 2) {
                curIndex += 1
                move()
                addAnimate()
            }
        } else {
            if (curIndex !== 0) {
                curIndex -= 1
                move()
                addAnimate()

            }
        }
    }, 200)
})
})
function move() {
    ds[curIndex].scrollIntoView({ behavior: 'smooth' })
}
function addAnimate() {
    if (curIndex !== 0) {
        ds[curIndex].classList.add()
    }
}

//切换主题
function switchThem(e) {
    if (e.target.checked) {
        container.value.classList.add('light')

    } else {
        container.value.classList.remove('light')

    }
}



</script>

<template>

        <div class="container" ref="container">
        <header>
            <router-link to="/home">前往商城页面</router-link>
            <input class="switch iconfont" type="checkbox" @click="switchThem">
        </header>

      

        <section>
            <h1>51SHOPPING</h1>
            <img src="/public/logo.png" alt="">
            <p>低价格、高质量、优服务</p>
            <h3>货物最全、种类最丰富的大型商城</h3>
            <div class="tip">下滑获取更多信息</div>
        </section>

        <section ref="section2" >
            <div class="top">
                <div class="vue">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-Vue"></use>
                    </svg>
                    <p>Vue</p>
                </div>
                <h1>＋</h1>
                <div class="spring_boot">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-SPRINGBOOT"></use>
                    </svg>
                    <p>SpringBoot</p>
                </div>
            </div>
            <div class="bot">
                <h3 style="--top:0">前端：选用Vue开发</h3>
                <h3 style="--top:7%">后端：选用SpringBoot开发</h3>
                <h3 style="--top:14%">及其他相关技术栈</h3>
                <h2>一套完整的囊括前后台的商城系统</h2>
            </div>
        </section>

        <section ref="section3">
            <h1>关于我们</h1>
            <div class="main">
                <div class="a1">
                    <a href="#">（后）</a>
                    <img src="/public/author1.jpg" alt="">
                    <p>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-tengxunqie"></use>
                        </svg>
                        <span>2908046391</span>
                    </p>
                </div>
                <div class="a2">
                    <a href="#">（前）</a>
                    <img src="/public/author2.png" alt="">
                    <p>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-tengxunqie"></use>
                        </svg>
                        <span>2939239063</span>
                    </p>
                </div>
            </div>
        </section>
    </div>

   

</template>

<style scoped lang="less">
// 白天
@keyframes opa {
    0%{
        // opacity: 0;
        background: #1a1a1a;
    }
    50%{
        background: #fff;
    }
    100%{
        // opacity: 1;
        background: -webkit-linear-gradient(315deg, #42d392, #fff 25%, #fff 75%, #42d392);
    }
}
.light {
    --text-color: #1a1a1a;
    --theme-bgcolor: -webkit-linear-gradient(315deg, #42d392, #fff 25%, #fff 75%, #42d392);
    animation: opa 1s ease-in-out;
}

//字体渐变色
.ingrident {
    background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.container {
    overflow: hidden;
    height: 100%;
    background: var(--theme-bgcolor);
    transition: background .5s;

    section {
        padding-top: 100px;
        width: 100%;
        height: 100%;

        //第三个盒子
        &:nth-of-type(3) {
            .main {
                padding-top: 20px;
                display: flex;
                justify-content: space-evenly;

                div {
                    color: var(--text-color);
                    height: 184px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;
                }

                a {
                    color: var(--text-color);

                }

                img {
                    width: 100px;
                    height: 100px;
                }

                p {
                    font-size: 30px;
                }
            }

            h1 {
                letter-spacing: 10px;
                font-size: 40px;
                text-align: center;
                .ingrident();
            }
        }

        //第二个盒子
        &:nth-of-type(2) {

            .bot {
                position: relative;
                height: 300px;

                h3 {
                    position: absolute;
                    width: 270px;
                    left: 40%;
                    top: var(--top);
                    transform: translateX(-50%);
                    .ingrident();
                    animation: h3_move 1s ease-out;

                }

                h2 {
                    position: absolute;
                    .ingrident();
                    left: 60%;
                }

            }

            .top {
                display: flex;

                .icon {
                    width: 400px;
                    height: 200px;
                }

                h1 {
                    line-height: 238px;
                    font-size: 85px;
                    color: var(--text-color);
                }

                .vue {
                    text-align: right;
                    width: 50%;
                    height: 300px;

                    p {
                        font-size: 25px;
                        padding-right: 176px;
                        .ingrident();
                    }
                }

                .spring_boot {
                    width: 50%;
                    height: 300px;

                    p {
                        font-size: 25px;
                        padding-left: 134px;
                        .ingrident();
                    }
                }
            }


        }

        //第一个盒子
        &:nth-of-type(1) {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;

            @keyframes headline {
                0% {
                    transform: translateX(-800px);
                }

                100% {
                    transform: translateX(0px);

                }
            }

            @keyframes text {
                0% {
                    transform: translateY(900px)
                }

                100% {
                    transform: translateX(0px);

                }
            }

            @keyframes aa {
                0% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }
            @keyframes scal {
                0%{
                    transform: scale(.5);
                }
                70%{
                    transform: scale(1);

                }
                100%{
                    transform: scale(.7);

                }
            }

            .tip{
                position: absolute;
                .ingrident();
                top: 20%;
                right: 20%;
                width: 38px;
                height: 360px;
                font-size: 30px;
                animation: scal 2s linear infinite;
            }
            h1 {
                .ingrident();
                font-size: 52px;
                animation: headline 1s ease-out;
            }

            p {
                font-size: 20px;
                transform: translateY(20px);
                .ingrident();
                animation: text 1s ease-out;

            }

            h3 {
                font-size: 20px;
                transform: translateY(40px);
                animation: text 1s ease-out;

                .ingrident();
            }

            img {
                width: 200px;
                height: 200px;
            }
        }
    }

    //顶部导航
    header {
        position: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 0;
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #e7e7e7;
        z-index: 999;
        @keyframes aa {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        a {
            padding: 0 10px;
            color: #2e3f4f;
            height: 100%;
            line-height: 60px;
            .ingrident();
            animation: aa 1.5s ease-out;
        }

        //主题开关
        .switch {
            position: relative;
            height: 40%;
            padding: 0 25px;
            appearance: none;
            border: 1px solid #a7a7a7;
            border-radius: 20px;
            background-color: #2f2f2f;
            cursor: pointer;

            &:checked::before {
                transform: translateX(60%);
                color: black;
                content: '\e627';

            }

            &:checked {
                background-color: #fff;
            }

            &::before {
                color: #fff;
                position: absolute;
                content: '\e676';
                padding-left: 6px;
                top: 0;
                left: 0;
                width: 50%;
                height: 100%;
                line-height: 22px;
                transition: all .3s;
            }
        }
    }

}
</style>
